<template>
  <div class="help_bg ">
    <div class="regibg"></div>
    <div class="zhucbox">
      <div class="regibox">
        <h1>Peachphoto注册</h1>
        <el-form :label-position="labelPosition" label-width="80px" :model="register" ref="register" :rules="rules">
          <el-form-item label="手机号" prop="Userphone">
            <el-input v-model="register.Userphone" clearable maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="Verification" class="code">
            <el-input v-model="register.Verification" clearable maxlength="5" style="width:55%"></el-input>
            <el-button type="danger" @click="Getyzm" class="yzmtext">获取验证码{{ count }}</el-button>
          </el-form-item>
          <el-form-item label="用户名" prop="Username">
            <el-input v-model="register.Username" clearable maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="register.pwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkpwd">
            <el-input v-model="register.checkpwd"></el-input>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <el-row>
          <span>已有账号</span><el-button @click="Backlogin">去登录</el-button>
          <el-button type="primary" @click="Goreg('register')">注册！</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {

    // 手机号正则
    var checkphone = (rule, value, callback) => {
      if (!value) {
        return callback(new console.error(("手机号不为空")));
      } else {
        const phonereg = /0\d{2,3}-\d{7,8}/;
        if (phonereg.text(value)) {
          callback();
        } else {
          return callback(new console.error(("请输入正确的手机号")));
        }
      }
    };
    // 验证码正则

    //用户名正则验证
    var nickname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        const reg = /^[a-zA-Z0-9_-]{4,16}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("6至20位,以字母开头,字母,数字,减号,下划线"));
        }
      };
    };
    // 密码正则验证
    var pwds = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.pwd !== '') {
          this.$refs.ruleForm.validateField('pwd');
        }
        callback();
      }
    };
    //第二次输入密码验证
    var checkpwds = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.register.pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      show: true,
	    count: '',
	    timer: null,
      fullscreenLoading: false,
      labelPosition: 'left',
      // 表单
      register: {
        Verification: '',
        Userphone: '',
        Username: '',
        pwd: '',
        checkpwd: ''
      },
      // 焦点事件
      rules: {
        Userphone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { validator: checkphone, trigger: "blur" }
        ],
        Verification: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ],
        Username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { validator: nickname, trigger: "blur" }
        ],
        pwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { validator: pwds, trigger: "blur" }
        ],
        checkpwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { validator: checkpwds, trigger: "blur" }
        ]
      }
    };

  },
  methods: {
    // 返回按钮 
    Backlogin() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('body')//loadin覆盖的dom元素节点
      });
      setTimeout(() => {
        loading.close();
        this.$router.push('/HelloWorld')
      }, 800);
    },
    // 获取验证码
    Getyzm() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count -= 1;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 注册按钮
    Goreg(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }

}
</script>

<style scoped>
@import '../css/media.css';
.help_bg {
  display: flex;
  height: 800px;
}

.regibg {
  background-image: url(../assets/banner.jpg);
  background-size: cover;
  background-position: 50%;
  width: 30%;
}

.zhucbox {
  width: 70%;
}

.regibox {
  width: 50%;
  margin: 25px auto;
}
</style>